// class List{
//     constructor(){
//         // 获取元素
//         this.ul=document.querySelector('.container>.right>ul')
//         this.init()

//     }
//     // 初始化
//     init(){
//      this.request()
//      this.render()
//     }
//     // 发送请求
//     request(){
//         pAjax({url:'../data/goods.json'})
//         .then(res=>{
//             let data = JSON.parse(res)
//             data =data.slice(0,60)
//             console.log(data)
//             this.render(data)
//         })
//     }
//     render(data){
//         data.forEach(item=>{
//             this.ul.innerHTML +=`
//             <li>
//                     <a href="../html/details.html?id=${item.goods_id}" style="text-decoration:none; color:black;">
//                     <div class="pic">
//                         <img src="${item.img_small_logo}">
//                     </div>
//                     <p class="title hide">${item.title}</p>
//                     </a>
//                     <p class="price">${item.price}</p>
//                     <button data-id=${item.goods_id}>加入购物车</button>
//                 </li> 
//             `
//         })
//         // $(".paging_list").paging({
//         //     PageNum: 10, //每页显示数目
//         //     pageMax: true, //按钮长度是否显示
//         //     pageMaxHideShow: false, //在最后一个的时候是否隐藏按钮长度
//         //     pageDownUpHide: false, //到第一个或最后一个是否让上一页或下一页消失
//         //     pageInput: true, //是否使用文本框输入跳转
//         //     pagingBtnHide: false, //是否让按钮变为一个
//         //     pagingBtnPaging: true,//按钮是否分页
//         //     pagingDisplay: "flex"//显示的属性，弹性盒子还是块化
//         // })

//     }

// }
// new List()

require(['./config'],()=>{
    require(['paging','pAjax'],(paging)=>{
                
        class List{
            constructor(){
                // 获取元素
                this.ul=document.querySelector('.container>.right>ul')
                this.span=document.querySelector('.Go')
                // this.count=document.querySelector('.count>span')
                // console.log(this.span)
                this.init()
        
            }
            // 初始化
            init(){
             this.request()
            //  this.render()
            this.count()
            }
            // 发送请求
            request(){
                pAjax({url:'../data/goods.json'})
                .then(res=>{
                    // console.log(777,res);
                    let data = JSON.parse(res)
                    data =data.slice(0,80)
                    // console.log(data)
                    this.render(data)
                })
            }
            render(data){
                // console.log(555,data);
                data.forEach(item=>{
                    this.ul.innerHTML +=`
                    <li>
                            <a href="../html/details.html?id=${item.goods_id}" style="text-decoration:none; color:black;">
                            <div class="pic">
                                <img src="${item.img_small_logo}">
                            </div>
                            <p class="title hide">${item.title}</p>
                            </a>
                            <p class="price">${item.price}</p>
                            <button data-id=${item.goods_id}>加入购物车</button>
                        </li> 
                    `
                })
                $(".paging_list").paging({
                    PageNum: 20, //每页显示数目
                    pageMax: true, //按钮长度是否显示
                    pageMaxHideShow: false, //在最后一个的时候是否隐藏按钮长度
                    pageDownUpHide: false, //到第一个或最后一个是否让上一页或下一页消失
                    pageInput: true, //是否使用文本框输入跳转
                    pagingBtnHide: false, //是否让按钮变为一个
                    pagingBtnPaging: true,//按钮是否分页
                    pagingDisplay: "block"//显示的属性，弹性盒子还是块化
                })
              this.bindHtml(data)
            }
            // 加入购物车
            bindHtml(data){
            this.ul.onclick = (e)=>{
                let target = e.target || e.srcElement
                if(target.nodeName == 'BUTTON'){
                    // 获取自定义属性
                    let id =target.dataset.id -0
                    // 获取对应渲染的数据
                    // console.log(id)
                    let goods=data.find(item=>{return item.goods_id ==id})
                    // 查看localstorage里面有无数据
                    let list =JSON.parse(localStorage.getItem('cart')) || []
                    if(!list.length){
                        list.push(goods)
                        goods.cart_number=1
                    }else{
                        let res =list.some(item=>{return item.goods_id == id})
                        if(res){
                            let index =list.findIndex(item=>{return item.goods_id})
                            list[index].cart_number++
                        }else{
                            list.push(goods)
                            goods.cart_number=1
                        }
                    }
                localStorage.setItem('cart',JSON.stringify(list))
                this.count()
                }
            }
    
            }
            //购物车显示数量
            count(){
                let list = JSON.parse(localStorage.getItem('cart')) || []
                let num =0
                // console.log(444,list);
                list.forEach(item=>{
                    num += item.cart_number
                })
                this.span.innerHTML = num
    
            } 
    
        }
        return new List()
    }) 
})